<template>
  <div>
    <ZgCard title="表单测试">
      <table class="form">
        <tr>
          <td class="label w160 need">单行输入</td>
          <td><ZgInput v-model="input" :width="200"></ZgInput>{{ input }}</td>
        </tr>
        <tr>
          <td class="label">下拉单选</td>
          <td>
            <ZgSelect v-model="select" :width="200" :options="[{value:'1',label:'aaa'},{value:'2',label:'bbb'},{value:'3',label:'ccc'}]"></ZgSelect>
            {{ select }}
          </td>
        </tr>
        <tr>
          <td class="label">勾选</td>
          <td><ZgCheckbox v-model="ck">开启某某功能</ZgCheckbox>{{ ck }}</td>
        </tr>
        <tr>
          <td class="label">多选</td>
          <td>
            <ZgSelectMany v-model="cks"></ZgSelectMany>
            {{ cks }}
          </td>
        </tr>
        <tr>
          <td class="label">单选</td>
          <td>
            <ZgRadio v-model="rds"></ZgRadio>
            {{ rds }}
          </td>
        </tr>
        <tr>
          <td class="label">日期</td>
          <td><ZgDatePicker v-model="date"/>{{ date }}</td>
        </tr>
        <tr>
          <td class="label">日期时间</td>
          <td><ZgDateTimePicker v-model="datetime"/>{{ datetime }}</td>
        </tr>
        <tr>
          <td class="label">时间</td>
          <td><ZgTimePicker v-model="time"/>{{ time }}</td>
        </tr>
        <tr>
          <td class="label">整数</td>
          <td><ZgNumber v-model="int" :width="100"/>{{ int }}</td>
        </tr>
        <tr>
          <td class="label">浮点数</td>
          <td><ZgNumber v-model="float" isFloat :width="100"/>{{ float }}</td>
        </tr>
        <tr>
          <td class="label">星星</td>
          <td><ZgRate v-model="rate" />{{ rate }}</td>
        </tr>
        <tr>
          <td class="label">开关</td>
          <td><ZgSwitch v-model="swit"></ZgSwitch>{{ swit }}</td>
        </tr>
        <tr>
          <td class="label">标签</td>
          <td><ZgTags v-model="tags"></ZgTags>{{ tags }}</td>
        </tr>
        <tr>
          <td class="label top">富文本</td>
          <td><ZgTinymce v-model="tinymce" :height="400"></ZgTinymce>{{ tinymce }}</td>
        </tr>
        <tr>
          <td class="label top">图片上传</td>
          <td><ZgUpImg v-model="img"></ZgUpImg>{{ img }}</td>
        </tr>
        <tr>
          <td class="label top">字典选择</td>
          <td><ZgDictionary v-model="dic"></ZgDictionary>{{ dic }}</td>
        </tr>
        <tr>
          <td class="label top">文件上传</td>
          <td><ZgUpFile v-model="files"></ZgUpFile>{{ files }}</td>
        </tr>
      </table>
    </ZgCard>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data () {
    return {
      input: '',
      select: '1',
      ck: false,
      cks: ['1', '2'],
      rds: '1',
      date: moment().format('YYYY-MM-DD'),
      datetime: moment().format('YYYY-MM-DD HH:mm:ss'),
      time: moment().format('HH:mm:ss'),
      int: 1,
      float: 1.0,
      rate: 2.5,
      swit: false,
      tags: [],
      tinymce: '',
      img: '',
      dic: '',
      files: []
    }
  }
}
</script>
<style lang="less" scoped>
</style>
